﻿@{
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
    ViewBag.Title = "GoogleMap";
}
@section Script{
    <link rel="stylesheet" href="@Url.Content("~/Content/googleMap.css")" type="text/css" media="screen, projection">
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        yepnope([{ load: "/Content/inuit.css"}]);
        // key=ABQIAAAAMX--rs3OMKszB-7_6aHNexRJ9o4b0NW3WdtilRIryJthRQiIvxQEcxbtabi6FmHno6t54hfqOr7X_A
        // var params = {"other_params":"client=gme-yourKey&sensor=false"};
        var params = { "other_params": "sensor=true&language=zh-CN&region=chn9", "base_domain": "ditu.google.cn" };
        google.load("jquery", "1");
        google.load("jqueryui", "1");
        google.load("maps", "3", params);
        //        google.load("jquery", "1");

        // on page load complete, fire off a jQuery json-p query
        // against Google web search
        //        function OnLoad() {
        //            var url = "http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?";
        //            $.getJSON(url, function (data) {
        //                if (data.responseData.results &&
        //        data.responseData.results.length > 0) {
        //                    var results = data.responseData.results;
        //                    var content = document.getElementById('content');
        //                    content.innerHTML = '';
        //                    for (var i = 0; i < results.length; i++) {
        //                        // Display each result however you wish
        //                        content.innerHTML += results[i].titleNoFormatting + "<br/>";
        //                    }
        //                }
        //            });
        //        }
        //        google.setOnLoadCallback(OnLoad);;
    </script>
    <script type="text/javascript">

        $(function () {
            var geocoder;
            var map;
            function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            function codeAddress() {
                var address = document.getElementById("address").value;
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }
            function addressCZ() {
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({ "address": "changzhou" }, function (r, s) {
                    if (s == google.maps.GeocoderStatus.OK) {
                        var mapOptions = { zoom: 12, center: r[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP };
                        map = new google.maps.Map($("#map_canvas")[0], mapOptions);
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                })
            }

            $("#show").click(function () { addressCZ(); });
        });
    </script>
}
<div id="googleMap" style="height: 100%">
    <div>
        <input id="address" type="text" value="jiangsu">
        <input type="button" value="Geocode" onclick="codeAddress()">
        <button id="show">show</button>
    </div>
    <div id="map_canvas" style="height: 90%; top: 30px">
    </div>
</div>
